<template>
  <div class="container">
    <button @click="getImages" class="btn">获取图片</button>
    <input type="text" name="" id="" placeholder="输入英雄名称" v-model="name" @keydown.enter="getImages" class="input"><br><br><br><br>
    <img v-for="(item, index) in imageList" :key="index" :src="item.imageUrl" :alt="item.imageType" width="200px" height="100px" style="margin: 20px;">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: '孙悟空',
      imageList: []
    }
  },
  methods: {
    getImages() {
      axios({
        url: 'http://127.0.0.1/api/getImages',
        params: {
          name: this.name
        }
      }).then(res => {
        console.log(res.data.data)
        this.imageList = res.data.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .container{
    .btn{
      width: 120px;
      height: 50px;
      border: 2px solid #ccc;
      background-color: aqua;
      color: white;
      vertical-align: middle;
    }
    .input{
      margin-left: 20px;
      width: 300px;
      height: 45px;
      padding-left: 20px;
      font-size: 18px;
    }
  }
</style>
